((doc) => {
    let box = doc.querySelector('.box'),
        mask = doc.querySelector('.mask'),
        big = doc.querySelector('.big')

    let init = () => {
        bindEvent()
    }

    let bindEvent = () => {
        box.addEventListener("mouseenter", () => handleBoxMouseEnter())
        box.addEventListener("mouseleave", () => handleBoxMouseLeave())
        box.addEventListener('mousemove', function (e) { handleBoxMouseMove(e, this) })
    }

    function handleBoxMouseEnter() {
        mask.style.display = 'block'
        big.style.display = 'block'
    }

    function handleBoxMouseLeave() {
        mask.style.display = 'none'
        big.style.display = 'none'
    }

    function handleBoxMouseMove(e, _this) {
        let x = e.pageX - _this.offsetLeft,
            y = e.pageY - _this.offsetTop;

        let maskX = x - mask.offsetWidth / 2,
            maskY = y - mask.offsetHeight / 2

        // 范围限制
        maskX = maskX < 0 ? 0 : maskX;
        maskY = maskY < 0 ? 0 : maskY;

        let maskMaxX = box.offsetWidth - mask.offsetWidth,
            maskMaxY = box.offsetHeight - mask.offsetHeight

        maskX = maskX > maskMaxX ? maskMaxX : maskX
        maskY = maskY > maskMaxY ? maskMaxY : maskY

        mask.style.left = maskX + 'px'
        mask.style.top = maskY + 'px'

        let bigX = -(maskX * 2) + 'px',
            bigY = -(maskY * 2) + 'px'

        big.style.backgroundPositionX = bigX
        big.style.backgroundPositionY = bigY
    }

    init()
})(document)